<template>
  <div>
    <v-back></v-back>

    <!-- 有数据的时候 -->
    <ul class="items">
      <li v-for="item in goodslist" :key="item.id" @click="godetail(item.id)">
        <!-- 左边的图片 -->
        <img :src="item.img" alt="" />
        <!-- 右边的详细 -->
        <div class="content">
          <h2 :title="item.goodsname">{{ item.goodsname }}</h2>
          <p class="price">
            现价格：{{ item.market_price }}<s>原价格：{{ item.price }}</s>
          </p>
          <span>双十一限制</span>
        </div>
      </li>
    </ul>

    <!-- 无数据的时候 -->
    <div v-show="goodslist.length == 0">
      <van-empty description="暂无数据,请耐心等待!" />
    </div>
  </div>
</template>


<script>
import { getgoodlist } from "../request/app";
export default {
  data() {
    return {
      goodslist: [],
    };
  },
  methods:{
    godetail(id){
      this.$router.push({
        path:"/detail",
        query:{
          id
        }
      })
    }
  },
  mounted() {
    getgoodlist({
      cateid: this.$route.query.id,
    }).then((val) => {
      this.goodslist = val.list.goodData;
    });
  },
};
</script>


<style scoped>
@import "../assets/css/list.css";
</style>